<template>
	<view class="buildgroup" :style="{marginTop:systemBarHeight+'px'}">
		<view class="header">
			<image src="../../static/images/commom/back.png" class="btn back" @tap="back"></image>
			<view class="text">
				创建群聊
			</view>
		</view>
		<view class="container" >
			<!-- <image class="img" :src="imgurl" mode="scaleToFill" @tap = "choosegroupimage"></image> -->
			<image-cropper :src="tempFilePath" @confirm="confirm"  @cancel="cancel"></image-cropper>
			<image :src="cropFilePath" @tap="upload" class="img" mode="scaleToFill"></image>
		</view>
		<view class="groupname">
			<input  v-model="groupname" class="text" placeholder="请输入群名字"></input>
		</view>
		<view class="userlist">
			<view class="name">
				用户
			</view>
			 <scroll-view scroll-y="true" class="list">
				  <checkbox-group @change="checkboxChange">
				<view class="useritem" v-for="(item,index) in userlist" :key = "item.id">
					<view class="check">
						<checkbox class="box" :value="item.id+''" ></checkbox>
					</view>
					<view class="img">
						<image :src="item.imgurl" class="myimg"></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				 </checkbox-group>
			</scroll-view>
		</view>
		<view class="bottom" :class="{nocheked:checkedlist.length == 0||groupname == ''}" @tap="creategroup">
			创建({{checkedlist.length}})
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
	export default {
		data() {
			return {
				user:{},
				tempFilePath: "",
				cropFilePath: '../../static/images/commom/wiki.png',
				groupheadimg:'group.png',//默认群头像
				groupname:'',
				userlist:'',
				checkedlist:[],
				systemBarHeight:''
			};
		},
		onLoad(){	
			this.getSysteminfo();
			this._gettoken();//获取token值
			this.getlist();//获取好友
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			_gettoken(){//获取用户信息和token值
				try{
				    const value = uni.getStorageSync('wikiuser');
				    if (value) {
				      this.user = JSON.parse(value);
				    }
				} 
				catch(e){
				   console.log(e)
				}
			},
			creategroup(){//创建好友群
				if(this.checkedlist.length == 0 || this.groupname == ''){
					return
				}		
				this._creategroup()
			},
			_creategroup(){//
				uni.request({
					url:this.serverurl+'group/creategroup',
					data:{
						uid:this.user.id,
						name:this.groupname,
						imgurl:this.groupheadimg,
						myusers:this.checkedlist,
						token:this.user.token
					},
					method:'POST',
					success:(result)=> {
						let info = result.data;
						if(info.status == 200){
							uni.navigateTo({
								url:"../../pages/friendslist/friendslist"
							})
						}else if(info.status == 500){
							uni.showToast({
							    title: '群创建失败',
							    duration: 2000,
								icon:'none'
							});
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}	
					}
				})
			},
			checkboxChange(e){//选取被选择的用户
				var items = this.userlist;
				var values = e.detail.value;
				for (var i = 0; i < items.length; i++) {
					const item = items[i]
					if(values.includes(item.id+'')){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				var list = []
				items.forEach((item)=>{
					if(item.checked){
						list.push(item.id) 
					}
				})
				list.push(this.user.id);
				this.checkedlist = list
			},
			back(){
				uni.navigateTo({
					url:"../../pages/friendslist/friendslist"
				})
			},
			getlist(){//获取好友信息
				uni.request({
					url:this.serverurl+"index/getusers",
					data:{
						uid:this.user.id,
						state:0,
						token:this.user.token
					},
					method:'POST',
					success:(res)=>{
						let info = res.data
						if(info.status == 200){
							this.userlist =info.data
							for(var i = 0;i<this.userlist.length;i++){
								let obj = this.userlist[i];
								obj.imgurl = this.serverurl+`userimage/${obj.imgurl}`;
							}
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}					
					}
				})	
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath
				uni.uploadFile({
					url: this.serverurl+'files/upload',
					filePath: this.cropFilePath,
					name: "file",
					fileType: "image",
					formData: {
						'url':'group',
						'name':(new Date()).getTime()+this.user.id,
					},
					success: (uploadFileRes) => {
						var backstr = JSON.parse(uploadFileRes.data);
						this.groupheadimg = `${backstr.filename}`
					},
					fail(e) {
					  // console.log("this is errormes " + e.message);
					},
				  });
			},
			cancel() {
				// console.log('canceled')
			}
		},
		components:{
			ImageCropper,
		}
	}
</script>

<style lang="scss">
.buildgroup{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.header{
		position: relative;
		height: 120rpx;
		width: 100%;
		padding: 0 42rpx;		
		box-sizing: border-box;
		// border-bottom: 1px solid rgba(187, 187, 187, 100);;
		.btn{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 48rpx;
			height: 48rpx;		
		}
		.text{
			flex: 1;
			text-align: center;
			line-height: 120rpx;
			color: rgba(16, 16, 16, 100);
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.container{
		margin-top: 120rpx;
		width: 100%;
		.img{
			box-sizing: border-box;
			display: block;
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			border: 6rpx solid rgba(52, 199, 88, 100);
		}
	}
	.groupname{
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		.text{
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			background-color: rgba(242, 242, 247, 100);
			border-radius: 24px;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.userlist{
		position: fixed;
		top: 780rpx;
		bottom: 0;
		width: 100%;
		.name{
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			font-size: 40rpx;
			text-align: left;
			font-weight: bold;
		}
		.list{
			position: absolute;
			top: 62rpx;
			bottom: 110rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			.useritem{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.img{
					margin-left: 20rpx;
					.myimg{
						width: 80rpx;
						height: 80rpx;
						border-radius: 34rpx;
						border: 4rpx solid rgba(52, 199, 88, 100);
						background-color: #B2EF9B;
					}
				}
				.name{
					font-size: 32rpx;
				}
			}	
		}
	}
	.bottom{
		position: absolute;
		bottom: 20rpx;
		width: 550rpx;
		height: 90rpx;
		line-height: 88rpx;
		border-radius: 32rpx;
		background-color: rgba(52, 199, 88, 100);
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
		font-weight: bold;
		&.nocheked{
			background-color: #BBBBBB;
		}
	}
}
</style>
